<template>
  <view class="container">
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="24" color="#333"></uni-icons>
      </view>
      <text class="title">我的关注</text>
    </view>
    
    <view class="follow-list" v-if="followedStores.length > 0">
      <view class="store-item" v-for="store in followedStores" :key="store._id" >
        <image class="store-logo" :src="`/static/${store.imgUrl}`" mode="aspectFill"></image>
        <view class="store-info">
          <view class="store-name">{{store.name}}</view>
          <view class="store-stats">
            <text>月售 {{store.sales}}</text>
            <text>起送 ¥{{store.expressLimit}}</text>
            <text>运费 ¥{{store.expressPrice}}</text>
          </view>
          <view class="store-slogan">{{store.slogan}}</view>
        </view>
      </view>
    </view>
    
    <view class="empty-state" v-else>
      <image src="/static/imgs/assets/empty-follow.png" mode="aspectFit"></image>
      <text>暂无关注的商店</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      followedStores: [],
      userInfo: {},
      phoneNumber: ''
    }
  },
  onLoad() {
    this.phoneNumber = uni.getStorageSync('currentPhone');
    this.loadUserInfo();
  },
  onShow() {
    this.loadUserInfo();
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    loadUserInfo() {
      uni.request({
        url: `http://localhost:3000/users?phone=${this.phoneNumber}`,
        success: (res) => {
          if (res.statusCode === 200 && res.data.length > 0) {
            this.userInfo = res.data[0];
            this.loadFollowedStores();
          }
        }
      });
    },
    loadFollowedStores() {
      if (!this.userInfo.follows || this.userInfo.follows.length === 0) {
        return;
      }
      
      uni.request({
        url: 'http://localhost:3000/hotList',
        success: (res) => {
          if (res.statusCode === 200) {
            this.followedStores = res.data.filter(store => 
              this.userInfo.follows.includes(store._id)
            );
          }
        }
      });
    }
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.back-btn {
  padding: 10px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  margin-left: 10px;
}

.follow-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.store-item {
  background-color: white;
  border-radius: 10px;
  padding: 15px;
  display: flex;
  gap: 15px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.store-logo {
  width: 80px;
  height: 80px;
  border-radius: 8px;
}

.store-info {
  flex: 1;
}

.store-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.store-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}

.store-slogan {
  font-size: 12px;
  color: #999;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 100px;
}

.empty-state image {
  width: 200px;
  height: 200px;
  margin-bottom: 20px;
}

.empty-state text {
  color: #999;
  font-size: 14px;
}
</style>
